<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <!--百度统计-->
    <script src="/blog/js/statistics.js"></script>
    <!--animate 的css-->
    <link rel="stylesheet" type="text/css" href="/lib/animate/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/animate/css/animate.css"/>
    <!--layUI的css-->
    <link rel="stylesheet" href="/layui/css/layui.css">

</head>
<body>

<div id="main_content" style="width: 90%;padding: 2em 5%" class="showInTop a-time1 a-delay1">
    <div id="header_top" class="layui-row" style="margin: 0.5em 0">
        <div class="layui-col-md2 layui-col-sm2"><a href="/index.html"><i
                class="layui-icon layui-icon-return">&nbsp;</i>
            <span class="layui-font-green">返回首页</span></a></div>
        <div class="layui-col-md4 layui-col-md-offset2 layui-col-sm-offset2 layui-col-sm4" style="text-align: center">
            <i class="layui-icon layui-icon-home">&nbsp;</i>
            <span name="username" class="layui-font-green">南阁子</span><span class="layui-font-blue">的家</span>
        </div>
        <div class="layui-col-md2 layui-col-md-offset2 layui-col-sm-offset2 layui-col-sm2" style="text-align: right">
            <a name="toggle" href="#">
            <i class="layui-icon layui-icon-component">&nbsp;</i>
                <span class="layui-font-cyan">昼夜切换</span></a>
        </div>
    </div>

    <!--头部菜单-->
    <div id="header_menu" class="layui-card">
        <div class="layui-card-body" style="padding: 0">
            <img style="width: 100%;height: auto"
                 src="https://ae01.alicdn.com/kf/U23cf64e6403d4dcaa0f4c1023e73f539g.jpg" alt="">
        </div>
        <div>
            <ul class="layui-nav layui-bg-cyan">
                <li class="layui-nav-item">
                    <a href="#"><img name="head_portrait_url" src="https://picsum.photos/100/100?image=140"
                                     class="layui-nav-img">
                        <span name="username" class="layui-font-blue">一场梦123</span></a>
                    <dl class="layui-nav-child">
                        <dd><a onclick="edit_myInfo();">修改信息</a></dd>
                        <dd><a onclick="reset_pwd();">修改密码</a></dd>
                        <dd><a onclick="reset_bg();">自定义背景</a></dd>
                        <dd>
                            <a href="javascript:localStorage.removeItem('token');window.location.href='/index.html';">退出</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="#myInfo" class="layui-font-green">个人信息<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="#blog_list" class="layui-font-green">发布博客<span name="blog_number"
                                                                            class="layui-badge">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="#comment_list" class="layui-font-green">发布评论<span name="comment_number"
                                                                               class="layui-badge">9</span></a>
                </li>

            </ul>
        </div>
    </div>

    <!--个人信息-->
    <div id="myInfo" class="layui-row layui-col-space15" style="opacity: 0.7">
        <div class="layui-col-md6 layui-col-sm6">
            <div class="layui-panel" style="height: 20em">
                <div style="padding: 2em">
                    <strong name="username">&nbsp;</strong>
                    <i class="layui-icon layui-icon-username"></i>
                    <span name="UID">(UID：&nbsp;)</span>
                </div>
                <div style="padding: 2em">
                    <div>邮箱状态：<span name="email_flag" style="color: #FF0000">未验证</span></div>
                    <div style="padding-top: 0.5em">
                        <i class="layui-icon layui-icon-email"></i>邮箱：
                        <span name="email">&nbsp;</span>
                    </div>
                </div>
                <div style="padding: 1em 2em">
                    <div style="padding-top: 0.5em">
                        <i class="layui-icon layui-icon-cellphone-fine"></i>手机：
                        <span name="phone">&nbsp;</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6">
            <div class="layui-panel" style="height: 20em">
                <div style="padding: 2em;">
                    <strong>角色</strong>
                    <i class="layui-icon layui-icon-user" style="color: red"></i>
                    <span name="role_name" class="layui-font-orange">&nbsp;</span>
                </div>
                <div style="padding: 2em 2em 0.5em 2em;">
                    <span>头像url：</span>
                    <span name="head_portrait_url" class="layui-font-orange">&nbsp;</span>
                </div>
                <div style="padding: 0.5em 2em;">
                    <span>地址：</span>
                    <span name="address" class="layui-font-orange">&nbsp;</span>
                </div>
                <div style="padding: 0.5em 2em;">
                    <span>性别：</span>
                    <span name="sex" class="layui-font-orange">&nbsp;</span>
                </div>
                <div style="padding: 0.5em 2em;">
                    <span>发表博客：</span>
                    <span name="blog_number" class="layui-font-red">&nbsp;</span>
                </div>
                <div style="padding: 0.5em 2em;">
                    <span>发布评论：</span>
                    <span name="comment_number" class="layui-font-red">&nbsp;</span>
                </div>
            </div>
        </div>
    </div>

    <!--content：博客列表-->
    <div id="blog_list" class="my_opacity" style="margin-top: 1em">
        <div class="layui-card ">
            <div class="layui-card-header"><h3>这是一个标题</h3></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md3"><a href="blog_detail.html">
                        <img src="https://pic.imgdb.cn/item/6126117944eaada73914c092.jpg" alt="图片"
                             style="height: auto;width: 100%"></a>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset1">
                        <div class="layui-row">
                            卡片式面板面板通常用于非白色背景色的主体内<br/>
                            从而映衬出边框投影......
                        </div>
                        <!--博客的标签列表-->
                        <div class="layui-row">
                            <div class="layui-col-md2 layui-col-xs6" style="padding: 0.5em 0.5em">
                                <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs"
                                        onclick="tag_click('1')" name="1">
                                    我草123
                                </button>
                            </div>
                            <div class="layui-col-md2 layui-col-xs6" style="padding: 0.5em 0.5em">
                                <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs"
                                        onclick="tag_click('2')" name="2">
                                    我草123
                                </button>
                            </div>
                            <div class="layui-col-md2 layui-col-xs6" style="padding: 0.5em 0.5em">
                                <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs"
                                        onclick="tag_click('3')" name="3">
                                    我草123
                                </button>
                            </div>
                        </div>
                        <!--博客信息-->
                        <div class="layui-row layui-col-space4">
                            <div class="layui-col-md1"><img class="layui-nav-img"
                                                            src="https://picsum.photos/100/100?image=140"
                                                            alt=""></div>
                            <div class="layui-col-md3"><a href="#"><span
                                    class="layui-font-blue">一场游戏啦啦啦</span></a>
                            </div>
                            <div class="layui-col-md3"><i class="layui-icon layui-icon-date"></i>2021-08-03
                            </div>
                            <div class="layui-col-md2"><i class="layui-icon layui-icon-senior"></i>12345
                            </div>
                            <div class="layui-col-md3">
                                <button class="layui-btn layui-btn-xs layui-btn-radius">分类</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card ">
            <div class="layui-card-header"><h3>这是一个标题</h3></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md3"><a href="blog_detail.html">
                        <img src="https://pic.imgdb.cn/item/6126121d44eaada739164249.jpg" alt="图片"
                             style="height: auto;width: 100%"></a>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset1">
                        <div class="layui-row">
                            卡片式面板面板通常用于非白色背景色的主体内<br/>
                            从而映衬出边框投影......
                        </div>
                        <!--博客的标签列表-->
                        <div class="layui-row">
                            <div class="layui-col-md2 layui-col-xs6" style="padding: 0.5em 0.5em">
                                <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs"
                                        onclick="tag_click('1')" name="1">
                                    我草123
                                </button>
                            </div>
                            <div class="layui-col-md2 layui-col-xs6" style="padding: 0.5em 0.5em">
                                <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs"
                                        onclick="tag_click('2')" name="2">
                                    我草123
                                </button>
                            </div>
                            <div class="layui-col-md2 layui-col-xs6" style="padding: 0.5em 0.5em">
                                <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs"
                                        onclick="tag_click('3')" name="3">
                                    我草123
                                </button>
                            </div>
                        </div>
                        <!--博客信息-->
                        <div class="layui-row layui-col-space4">
                            <div class="layui-col-md1"><img class="layui-nav-img"
                                                            src="https://picsum.photos/100/100?image=140"
                                                            alt=""></div>
                            <div class="layui-col-md3"><a href="#"><span
                                    class="layui-font-blue">一场游戏啦啦啦</span></a>
                            </div>
                            <div class="layui-col-md3"><i class="layui-icon layui-icon-date"></i>2021-08-03
                            </div>
                            <div class="layui-col-md2"><i class="layui-icon layui-icon-senior"></i>12345
                            </div>
                            <div class="layui-col-md3">
                                <button class="layui-btn layui-btn-xs layui-btn-radius">分类</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页按钮-->
    <div id="blog_page_btn" class="layui-row" style="text-align: center"></div>

    <!--发布的评论列表-->
    <div style="margin: 10em 0;">
        <!--评论区域-->
        <!--标题-->
        <div class="layui-card-header">
            <h2 style="text-align: center">评论</h2>
        </div>
        <!--评论区-->
        <div class="layui-card-body">
            <!--评论列表-->
            <div id="comment_list" style="padding: 1em 1em 5em 2em">
                <!--评论1-->
                <div class="layui-row layui-col-space4">
                    <div class="layui-col-md2 layui-col-xs4">
                        <img class="layui-nav-img"
                             src="https://picsum.photos/100/100?image=140"
                             alt="">
                        <span class="layui-font-blue">人生梦一场</span></div>
                    <div class="layui-col-md2 layui-col-xs3"><i class="layui-icon layui-icon-date"></i>2021-08-03
                    </div>
                </div>
                <div class="layui-row" style="padding: 0 2em 1em 2em">
                    <p>With the development of social society, more and more college students are getgetting into
                        society to find a job. At the same time, the jobs are getting less as a result of the
                        development of AI, which means the social society wants more creative people instead of
                        skillful
                        people.</p>
                </div>
                <!--评论1-->
                <div class="layui-row layui-col-space4">
                    <div class="layui-col-md2 layui-col-xs4">
                        <img class="layui-nav-img"
                             src="https://picsum.photos/100/100?image=140"
                             alt="">
                        <span class="layui-font-blue">人生梦一场</span></div>
                    <div class="layui-col-md2 layui-col-xs3"><i class="layui-icon layui-icon-date"></i>2021-08-03
                    </div>
                </div>
                <div class="layui-row" style="padding: 0 2em 1em 2em">
                    <p>With the development of social society, more and more college students are getgetting into
                        society to find a job. At the same time, the jobs are getting less as a result of the
                        development of AI, which means the social society wants more creative people instead of
                        skillful
                        people.</p>
                </div>
                <!--评论1-->
                <div class="layui-row layui-col-space4">
                    <div class="layui-col-md2 layui-col-xs4">
                        <img class="layui-nav-img"
                             src="https://picsum.photos/100/100?image=140"
                             alt="">
                        <span class="layui-font-blue">人生梦一场</span></div>
                    <div class="layui-col-md2 layui-col-xs3"><i class="layui-icon layui-icon-date"></i>2021-08-03
                    </div>
                </div>
                <div class="layui-row" style="padding: 0 2em 1em 2em">
                    <p>With the development of social society, more and more college students are getgetting into
                        society to find a job. At the same time, the jobs are getting less as a result of the
                        development of AI, which means the social society wants more creative people instead of
                        skillful
                        people.</p>
                </div>
            </div>

            <!--评论分页按钮区域-->
            <div class="layui-row" id="comment_page" style="text-align: center"></div>
        </div>

    </div>
</div>

<!--固定的动态图-->
<div class="showRight a-time1 a-delay1" style="position: fixed; bottom:10px;right:1em;z-index:1000">
    <a href="#"><img style="width:5em;height:auto;" src="https://z3.ax1x.com/2021/08/31/hUava4.gif" alt=""></a>
</div>


<!--个人信息的layer-->
<form id="userInfoLayer" class="layui-form layui-form-pane" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-cellphone"></i>phone</label>
        <div class="layui-input-block">
            <input type="text" disabled name="phone" required lay-verify="phone" placeholder="phone"
                   autocomplete="off"
                   class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-username"></i>用户名</label>
        <div class="layui-input-block">
            <input type="text" disabled name="username" required lay-verify="required" placeholder="username"
                   autocomplete="off"
                   class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-user"></i>角色名</label>
        <div class="layui-input-block">
            <input type="text" disabled name="role_name" required lay-verify="required" placeholder="roleName"
                   autocomplete="off"
                   class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-location"></i>地址</label>
        <div class="layui-input-block">
            <input type="text" disabled name="address" required lay-verify="required" placeholder="address"
                   autocomplete="off"
                   class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item" pane>
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-male"></i>
            性别
            <i class="layui-icon layui-icon-female"></i>
        </label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-email"></i>邮箱</label>
        <div class="layui-input-block">
            <input type="text" disabled name="email" required lay-verify="email" placeholder="email"
                   autocomplete="off"
                   class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-email"></i>头像url</label>
        <div class="layui-input-block">
            <input type="text" disabled name="head_portrait_url" required lay-verify="url" placeholder="url"
                   autocomplete="off"
                   class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">发布博客</label>
        <div class="layui-input-block">
            <input type="text" disabled name="blog_number" autocomplete="off" class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">发布评论</label>
        <div class="layui-input-block">
            <input type="text" disabled name="comment_number" autocomplete="off" class="layui-input" value="">
        </div>
    </div>

    <div class="layui-form-item" hidden id="submitBtnDiv">
        <div class="layui-input-block" style="text-align: right">
            <button class="layui-btn" lay-submit lay-filter="formSubmit">更新</button>
            <button class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
        </div>
    </div>
</form>
<!--修改密码的layer-->
<form id="reset_pwd_layer" class="layui-form layui-form-pane" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">新密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入新密码"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">新密码不能和旧密码一致哦</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码确认</label>
        <div class="layui-input-inline">
            <input type="password" name="password_confirm" required lay-verify="required" placeholder="请重复密码"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请确认密码</div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="form_reset_pwd">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="reset_pwd_btn">重置</button>
        </div>
    </div>
</form>
<!--自定义背景图的layer-->
<form id="reset_bg_layer" class="layui-form layui-form-pane" hidden>
    <div name="bg_div" class="layui-form-item">

        <a onclick="check_bg('https://www.z4a.net/image/gvcei9');"><img
                src="https://www.z4a.net/images/2021/08/26/----e-4k_.th.jpg"
                alt="----e-4k_.th.jpg" border="0" style="width: 160px;height: 160px"></a>
        <a onclick="check_bg('https://www.z4a.net/image/gvcei9');"><img
                src="https://www.z4a.net/images/2021/08/26/----e-4k_.th.jpg"
                alt="----e-4k_.th.jpg" border="0" style="width: 160px;height: 160px"></a>
        <a onclick="check_bg('https://www.z4a.net/image/gvcei9');"><img
                src="https://www.z4a.net/images/2021/08/26/----e-4k_.th.jpg"
                alt="----e-4k_.th.jpg" border="0" style="width: 160px;height: 160px"></a>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">URL</label>
        <div class="layui-input-inline">
            <input type="text" name="background_image_url" required lay-verify="required" placeholder="请输入背景图的URL"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请确保URL有效</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">透明度</label>
        <div class="layui-input-inline">
            <input type="text" name="opacity" required lay-verify="required" placeholder="请输入0.0--1.0之间，1为不透明"
                   autocomplete="off" class="layui-input" value="1.0">
        </div>
        <div class="layui-form-mid layui-word-aux">0.0--1.0</div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="form_bg_pwd">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="reset_bg_btn">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" color="51,219,209" opacity='1' zIndex="1202" count="250"
        src="/lib/canvas/canvas-nest.js"></script>
</body>
</html>

<!--layUI的js-->
<script src="/layui/layui.js"></script>
<!--jQuery-->
<script src="/jquery-3.6.0.min.js"></script>
<!--引入自己的js-->
<script src="/blog/js/personal.js"></script>
<script src="/blog/js/background.js"></script>
<!--引入看板娘-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="/lib/live2d/autoload.js"></script>

<!--昼夜切换-->
<div class="mk-dark-mode-sky">
    <div class="mk-dark-mode-planet"></div>
</div>
<style>
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    /* 白天和黑夜的背景 */
    .mk-dark-mode-sky,
    .mk-dark-mode-sky:before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        transition: 2s ease all;
    }

    .mk-dark-mode-sky {
        background: linear-gradient(#feb8b0, #fef9db);
    }

    .mk-dark-mode-sky:before {
        opacity: 0;
        background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
    }

    .mk-dark-mode .mk-dark-mode-sky:before {
        opacity: 1;
    }

    /* 太阳和月亮 */
    .mk-dark-mode-planet {
        /*z-index: 1999999999;*/
        position: fixed;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        transform-origin: center bottom;
        transition: 2s cubic-bezier(.7, 0, 0, 1) all;
    }

    .mk-dark-mode-planet:after {
        position: absolute;
        left: 35%;
        top: 40%;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        content: "";
        background: linear-gradient(#fefefe, #fffbe8);
    }
</style>
<script>
    /* 这里为了方便演示，点击页面中任意位置即可触发切换动画 */
    $('#header_top a[name="toggle"]').click(function () {
        $("body").toggleClass("mk-dark-mode");
        let $mk = $(".mk-dark-mode-sky");
        $mk.css("z-index", 100);

        var angle = $('.mk-dark-mode-planet').data('angle') + 360 || 360;
        $('.mk-dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)'});
        $('.mk-dark-mode-planet').data('angle', angle);

        setTimeout(function () {
            $mk.css("z-index", -1);
        }, 500);
    });
    // 根据当前时间判断是白天还是黑夜
    setTimeout(function () {
        let nowDate = new Date();
        let hours = nowDate.getHours();
        if (hours > 18)
            $('#header_top a[name="toggle"]').click();
    }, 500);

</script>
